<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>当前的n值{{n}}</p>
</div>
<script src="../../JavaScript/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {n: 1},
        /*
        * beforeCreate
            类型：Function
            详细：
             在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
        * */
        beforeCreate() {
            console.log(" beforeCreate")
        },
        /*
        created
            类型：Function
            详细：
               在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，
               意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，
               且 $el property 目前尚不可用
        * */
        created() {
            console.log("created")

        },
        /*
        * beforeMount
            类型：Function
            详细：
            在挂载开始之前被调用：相关的 render 函数首次被调用。
        * */
        beforeMount() {
            console.log("beforeMount")

        },

        /*
        mounted
        类型：Function
        详细：
            实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
             注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，
             可以在 mounted 内部使用 vm.$nextTick
        * */
        mounted() {
            console.log("mounted")

        }
    })
</script>
</body>
</html>
